<template>
  <div>
    <div>
      <view
        style="
          position: fixed;
          top: 0px;
          background-color: #fff;
          width: 100%;
          left: 0px;
          z-index: 10;
        "
      >
        <view :style="{ height: statusBarHeight + 'px' }" />
        <view class="nav-main" :style="{ height: navbarHeight + 'px' }">
          <slot name="left">
            <view
              class="left"
              :style="{ 'margin-top': navbarHeight / 2 + 'px' }"
            >
              <image
                class="btn-icon"
                :src="require('@/static/project/back.png')"
                mode="scaleToFill"
                @click="back"
              />
              <view class="line" />
              <image
                class="btn-icon"
                :src="require('@/static/project/home.png')"
                mode="scaleToFill"
                @click="backHome"
              />
            </view>
            <view class="page-title">
              <span>{{ pageTitle }}</span>
            </view>
          </slot>
          <!-- <text class="title" style="text-align: center;">新建项目</text> -->
        </view>
        <view>
          <van-divider />
        </view>
      </view>
      <view
        :style="{
          'margin-top': statusBarHeight + navbarHeight + 20 + 'px',
          'padding-bottom': 4 + 'px',
        }"
      >
        <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
          <van-tabs
            ref="activeRef"
            :active="active"
            title-active-color="#739ECA"
            title-inactive-color="#666"
            color="#739ECA"
            line-height="2px"
            @change="onChange"
          >
            <van-tab title="发起提交">
              <approval-form :data="data" />
            </van-tab>
            <van-tab title="我的数据">
              <div v-if="loading" class="loading">
                <van-loading vertical>
                  加载中...
                </van-loading>
              </div>
              <template v-else>
                <div v-if="newsList.length" class="news-list">
                  <project-list
                    :list="newsList"
                    @deltetProject="deltetProjectFunc"
                    @editProj="editProj"
                  />
                  <!-- <uni-load-more :status="status" /> -->
                </div>
                <van-empty v-else description="暂无数据" />
              </template>
            </van-tab>
          </van-tabs>
        </ze-scroll>
      </view>
    </div>
  </div>
</template>
<script>
import approvalForm from './approval-form'
import { getAccessToken, getDeviceInfo } from '@/utils/storage'

import projectList from '@/pages/project/index/project-list.vue'
import { getMine } from '@/apis/office'
import { getApprovalList } from '@/apis/project'

export default {
  components: { approvalForm, projectList },
  onLoad(option) {
    console.log(option, 'option--')
    // this.getFormData()
    // console.log(JSON.parse(decodeURIComponent(option.partData)), 'option222-2')
    if (option.type == 'dept') {
      // this.data = option
    } else if (option.type == 'comm') {
      this.data = option
    } else if (option.type == 'tech') {
      this.data = option
    } else if (option.type == 'part') {
      this.data = option
    } else if (option.type == 'edit') {
      this.pageTitle = '编辑项目'
    }
  },
  data() {
    return {
      statusBarHeight: '0',
      navbarHeight: '0',
      pageTitle: '新建项目',
      active: 0,
      myList: [],
      current: 0,
      loading: true,
      newsList: [],
      status: 'more',
      pageNo: 1,
      finished: false,
      data: {},
      formD: {},
    }
  },
  onShow() {
    // setTimeout(() => {
    //   try {
    //     const value = uni.getStorageSync('project_form')
    //     console.log(value, '拿到表单数据了')
    //     this.formD = value
    //   } catch (e) {
    //     // error
    //   }
    // }, 4000)
    // this.test()
    // console.log('每次进入调用')
    // const value = uni.getStorageInfoSync('proj_edit')
    // console.log(value, '编辑数据')
  },
  mounted() {
    const res = getMine('test:10:91629f77-319d-11ee-8467-da610b509d97')
    this.getList()
    this.setHeight()
    // this.$on('deltetProject', this.test())
    // this.$on('deptPageChange', this.test())
  },
  methods: {
    // 删除后重新刷新页面
    deltetProjectFunc() {
      console.log('删除项目刷新了')
      this.loadNews()
    },
    // 点编辑重置tab选项
    editProj() {
      console.log('设置tab页')
      // this.$nextTick(() => {
      // })
      // setTimeout(() => {
      //   this.active = 0
      //   console.log(this.$refs.activeRef)
      // }, 2000)
      // this.active = 0
      // this.onChange({ detail: { name: 0 } })
    },
    async test(data) {
      console.log(data, '选中部门调用')
      // const res = await getAccessToken()
      // console.log(res, 'token')
    },
    getFormData() {
      // const data = uni.getStorageSync('project_form')
      // this.data = data
      // console.log(data, '拿到项目名称zz')
    },
    // 清空缓存数据
    cleanStoragData() {
      uni.removeStorageSync('project_form')
      uni.removeStorageSync('desc_form')
      uni.removeStorageSync('code_form')
      uni.removeStorageSync('address_form')
      uni.removeStorageSync('price_form')
      uni.removeStorageSync('hour_form')
      uni.removeStorageSync('remark_form')
      uni.removeStorageSync('begin_form')
      uni.removeStorageSync('end_form')
      uni.removeStorageSync('realbegin_form')
      uni.removeStorageSync('realend_form')
      uni.removeStorageSync('proj_edit')
    },
    // 设置高度
    setHeight() {
      const { statusBarHeight, navbarHeight } = getDeviceInfo()
      this.statusBarHeight = statusBarHeight
      this.navbarHeight = navbarHeight
      // console.log(this.statusBarHeight, 'statusBarHeight')
      // console.log(this.navbarHeight, 'navbarHeight')
    },
    // 返回上一级
    back() {
      // 清空缓存数据
      this.cleanStoragData()
      // uni.navigateBack({
      //   delta: 1,
      // })reLaunch
      // uni.switchTab({
      //   url: '/pages/office/index/index',
      // })
      uni.reLaunch({
        url: '/pages/office/index/index',
      })
    },
    // 返回主页
    backHome() {
      // 清空缓存数据
      this.cleanStoragData()
      uni.switchTab({
        url: '/pages/office/index/index',
      })
    },
    // 返回
    onClickLeft() {
      uni.navigateBack() // 直接使用 navigateBack
    },
    onChange(event) {
      // console.log(event, 'event')
      if (event.detail.name == 1) {
        this.pageNo = 1
        this.current = 1
        this.finished = false
        this.loadNews()
      }
    },
    /** 根据 current 获取资讯列表 */
    async loadNews() {
      try {
        if (this.pageNo === 1) {
          this.loading = true
        } else {
          this.status = 'loading'
        }
        // await sleep(300)
        const res = await getApprovalList({
          pageNo: this.pageNo,
        })
        const { list, total } = res.data

        if (this.pageNo === 1) {
          this.newsList = list
        } else {
          this.newsList = [...this.newsList, ...list]
        }

        if (this.newsList.length >= total) {
          this.finished = true
          this.status = 'noMore'
        }
      } catch (e) {
      } finally {
        this.loading = false
      }
    },
    loadMore() {
      if (this.finished) {
        return
      }
      this.pageNo++
      this.loadNews()
    },

    getList() {
      if (this.name === '请假') {
        this.myList = [
          {
            text: '请假',
            name: '张三',
            btn: '已通过',
            time: '2023.03.26',
            type: '事假',
            start: '2023.03.27',
            end: '2023.03.27',
          },
          {
            text: '请假',
            name: '李四',
            btn: '已撤销',
            time: '2023.03.28',
            type: '事假',
            start: '2023.03.28',
            end: '2023.03.28',
          },
        ]
      } else {
        this.myList = [
          {
            text: '调休',
            name: '张三',
            btn: '已通过',
            time: '2023.03.26',
            type: '调休',
            start: '2023.03.27',
            end: '2023.03.27',
          },
          {
            text: '调休',
            name: '李四',
            btn: '已撤销',
            time: '2023.03.28',
            type: '调休',
            start: '2023.03.28',
            end: '2023.03.28',
          },
        ]
      }
    },
    handleScrolltolower() {
      this.$refs.zeNewsRef.loadMore()
    },
  },
}
</script>
<style lang="scss" scoped>
.nav-main {
  // position: relative;
  // position: fixed;
  // display: flex;
  // align-items: center;
  // text-align: center;
  .left {
    height: 32px;
    padding: 0 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 24rpx;
    // top: 50%;
    transform: translateY(-50%);
    border-radius: 32rpx;
    // border: 1px solid #e7ebee;

    .btn-icon {
      width: 48rpx;
      height: 48rpx;
    }

    .line {
      width: 2rpx;
      height: 18px;
      margin: 0 14rpx;
      background: #e7ebee;
    }
  }
  .page-title {
    text-align: center;
    height: 40px;
    line-height: 41px;
    font-weight: 500;
  }

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
  }
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
</style>
<style lang="scss">
.van-sticky {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
}
</style>
